<!--

body {
background: url("../tlo_09a.jpg") fixed;
background-color: #0C1524;
transition: background .3s;
font-family: verdana, arial, "Sans Serif";
color:LIGHTSTEELBLUE;
font-size: 14px;
margin-left: 5px;
}

td A {background: url("../tlo_09a.jpg") fixed; color: white; text-decoration: none; font-size:22px; font-weight:normal; font-family:  Arial; text-align: left;}
td A:link { color: white; transition: background .3s;}
td A:hover { color: black; background: url("../e-Tablo.png") fixed; box-shadow: 0 0 0 black, 0 0 25px LIGHTSTEELBLUE, 0 0 5px black;}

td {font-size:24px;}

A {color: white; text-decoration: none; font-size: 22px; font-weight:normal; font-family: "Sans Serif"; text-align: left;}
A:link { color: white;}
A:hover { color: white;}

ol { margin-left: 6%; font-size: 21px; color:LIGHTSTEELBLUE; width: 380px;}
.ol {margin-top: -450px; margin-left: 40%; font-size: 21px; color:LIGHTSTEELBLUE;}
.naucz {margin-top: -71px; margin-left: 24%; font-size: 21px; color:LIGHTSTEELBLUE; transition: background .3s;}
.start {margin-bottom: 20px; margin-left: 535px; font-size: 21px; color:LIGHTSTEELBLUE; position: absolute; bottom: 190px; left: -140px;}

img {position: absolute; top: 152px; left: 68%;}
.img_00 {border-style:solid; border-color:#B18E7D; border-width:0px;width: 4px; position: static; margin-left: -14px; margin-bottom: 19px}
.img_01 {position: absolute; top: 182px; left: 64.5%; z-index: -1;}

h1 { margin-left: 4%; color:gold; text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px #00D7B8;}
h2 {position: absolute; top: 100px; left: 68.4%; color: goldenrod; font-family: Verdana, Arial, Helvetica, sans-serif;text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px #00D7B8;}
.h2 {position: absolute; top: 100px; left: 64.8%; color: goldenrod; font-family: Verdana, Arial, Helvetica, sans-serif;}
h3 {margin-top: -15px; margin-left: 4%; color:LIGHTSTEELBLUE; font-weight:normal}


.naucz A:link { color: LIGHTSTEELBLUE;}
.naucz A:visited { color: LIGHTSTEELBLUE;}
.naucz A:active { color: LIGHTSTEELBLUE;}
.naucz A:hover { color: black;}
.naucz A {text-decoration: none; font-size: 26px; font-weight: normal; font-family: Verdana, arial, "Sans Serif"; text-align: left; transition: background .3s; text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px #00D7B8;}

ol A:link { color: white; transition: background .3s;}
ol A:visited { color: white;}
ol A:active { color: white;}
ol A:hover { color: black; background-color: LIGHTSTEELBLUE; border-radius: 1px; text-shadow: none; box-shadow: 0 0 0 black, 0 0 10px LIGHTSTEELBLUE, 0 0 10px black;}
ol A {text-decoration: none; font-size: 20px; font-weight:normal; font-family: Verdana, Georgia, "Times New Roman", "Courier New", Tahoma, Arial, Helvetica, sans-serif; text-align: left;}

.ol1 {width: 69%; margin-left: 3%;}


#rok {position: fixed;
	bottom: 45%;
	right: 5.5%;
	WIDTH:100%;
}


#CSS {position: fixed;
	top: -140px;
	right: 100px;
}

#tableau {position: fixed;
	top: 8px;
	left: 5px;
	width: 600px;	
}




#next_01 {position: fixed;
	bottom: 300px;
	/*left: 405px;*/
	WIDTH:200px;
 opacity: 0.8;
}

#next_01:hover {
 opacity: 1;
 transition: 0.6s;
}

#back_01 {position: fixed;
	bottom: 300px;
	/*left: 230px;*/
	WIDTH:200px;
 opacity: 0.8;
}

#back_01:hover {
 opacity: 1;
 transition: 0.6s;
}

#next_02 {position: fixed;
	bottom: 240px;
	/*left: 380px;*/
	width:133px;
 opacity: 0.8;
}

#next_02:hover {
 opacity: 1;
 transition: 0.6s;
}

#back_02 {position: fixed;
	bottom: 330px;
	/*left: 380px;*/
	WIDTH:133px;
 opacity: 0.8;
}

#back_02:hover {
 opacity: 1;
 transition: 0.6s;

}













/* Przejścia-nawigacja między stronami*/

.center {
  text-align: left;
  }

.pagination {
  display: inline-block;
}

.pagination a {
  color: LIGHTSTEELBLUE;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;

  border-radius: 5px;
  position: relative;

  top: 10px;
  font-family: Verdana, Arial, Sans-serif;
box-shadow: 1px 1px 2px black, 0 0 15px LIGHTSTEELBLUE, 0 0 5px black;
}

.pagination a.active {
  background-color: #00A68A;
  color: white;
  border: 1px solid #4CAF50;
  border-radius: 5px;
box-shadow: 1px 1px 2px black, 0 0 0 LIGHTSTEELBLUE, 0 0 0 black;

}

.pagination a:hover:not(.active){
  background-color: #ddd;
  color: black;
box-shadow: 1px 1px 2px black, 0 0 0 LIGHTSTEELBLUE, 0 0 0 black;
}


/* Podpowiedź 1 */

.tooltip {
  position: relative;
  display: inline-block;
  font-size: 20px;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: #FFF3DB;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -65px;


/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 0.3s;
  /*transition: .5s;*/
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #FFF3DB transparent transparent transparent;


}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.9;
}




/* Podpowiedź 2 */

.tooltip_2 {
  position: relative;
  display: inline-block;
  font-size: 19px;
  
}

.tooltip_2 .tooltiptext_2 {
  visibility: hidden;
  width: 200px;
  background-color: #FFF3DB;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -100px;

/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 0.3s;
  /*transition: .5s;*/
}

.tooltip_2 .tooltiptext_2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #FFF3DB transparent transparent transparent;
}

.tooltip_2:hover .tooltiptext_2 {
  visibility: visible;
  opacity: 0.9;
}



/* nasze "POWIĘKSZENIE" */
.img_0x {
  position: absolute; top: 150px; left: 68.4%;
  width: 300px;
  height: 450px;
  background: transparent;
  object-fit: scale-down;
  /*box-shadow: 1px 1px 2px black, 0 0 15px #00D7B8, 0 0 5px LIGHTSTEELBLUE;*/
 box-shadow: 1px 1px 2px black, 0 0 25px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;  opacity: 0.9;
z-index: 1;
}

/* po najechaniu myszą
   zawartość obrazka przyjmie narastające, POWIĘKSZONE rozmiary
*/
.img_0x:hover {
  width: 450px;
  height: 675px;
  position: absolute; top: 45px;
  /*left: 63%;*/
  transition: all 1.5s;
opacity: 1;
box-shadow: 1px 1px 2px black, 0 0 40px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;
 /*box-shadow: 1px 1px 2px black, 0 0 100px black, 0 0 5px LIGHTSTEELBLUE;*/
}

/* po zejściu kursora zawartość obrazka
   zmniejsza się PŁYNNIE do ORYGINALNYCH rozmiarów
*/
.img_0x:not(:hover) {
  width: 300px;
  height: 450px;
  position: absolute; top: 150px;
/*left: 68.4%;*/
  transition: all .5s;
  transform: rotateZ(0deg);
  object-position: 50% 50%; !important;
  object-fit: fill;

}

img:hover {
  object-position: 50% 50%;
  object-fit: cover;
}

img:not(:hover) {
  object-position: 50% 50% !important;
  transition: all .3s;
  transform: rotateX(360deg);
}




/* nasze "POMNIEJSZENIE" */
.img_0y {
  position: absolute; top: 45px; left: 63%;
  width: 450px;
  height: 675px;
  background: transparent;
}

/* po najechaniu myszą
   zawartość obrazka
   przyjmie oryginalne
   rozmiary
*/
.img_0y:hover {
  object-position: 50% 50%;	/* "wjazd" z lewej -300% 50% | "wjazd" z dołu 50% 300%*/
  object-fit: scale-down;
 opacity: 0.9;				/*  transition: all .5s; */
}				/*  transform: rotateY(-360deg); */


.img_0y:not(:hover) {
  object-position: 50% 50% !important;
  transition: all 3s;
  transform: rotateY(360deg);
 box-shadow: 1px 1px 2px black, 0 0 40px LIGHTSTEELBLUE, 0 0 5px LIGHTSTEELBLUE;
}

.img_BLUE:not(:hover) {
  transition: all 0.3s;
  transform: rotateY(360deg);
}

.button {
  display: inline-block;
  border-radius: 1px;
  background-color: transparent; /* #0C1524 */
  border: none;
  color: #FFFFFF;		/*  */
  text-align: center;
  font-size: 17px;
  padding: 0px;
  width: 50px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  width: 50px;
}

.button span:after {
  content: ' foto ';
  position: relative;
  opacity: 0;
  top: 0;
  right: 0px;
  transition: .3s;
opacity: 0.2;
}

.button:hover span {
  padding-right: 0px;
  				/*  background-color: #0C1524; */
  background-color: #CC0001;
  width: 50px;
  transform: rotateZ(-360deg);
  transition: .3s;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
  width: 60px;
  background-color: #CC0001; /* #0C1524-ciemny niebieski z czerwoną obwódką, #CC0001-czerwony*/
}



.button1 {
  display: inline-block;
  border-radius: 1px;
  background-color: transparent; /* #0C1524 */
  border: none;
  color: #FFFFFF;		/*  */
  text-align: center;
  font-size: 17px;
  padding: 0px;
  width: 50px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0px;
}

.button1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  width: 50px;
}

.button1 span:after {
  content: ' fotos ';
  position: relative;
  opacity: 0;
  top: 0;
  right: 0px;
  transition: .3s;
}

.button1:hover span {
  padding-right: 0px;
  				/*  background-color: #0C1524; */
  background-color: #CC0001;
  width: 50px;
  transform: rotateY(-360deg);
  transition: .3s;
}

.button1:hover span:after {
  opacity: 1;
  right: 0;
  width: 60px;
  background-color: #CC0001; /* #0C1524-ciemny niebieski z czerwoną obwódką, #CC0001-czerwony*/
}


.button2 {
  display: inline-block;
  border-radius: 1px;
  background-color: transparent; /* #0C1524 */
  border: none;
  color: #FFFFFF;		/*  */
  text-align: center;
  font-size: 17px;
  padding: 0px;
  width: 50px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0px;
}

.button2 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  width: 50px;
}

.button2 span:after {
  content: ' fotos ';
  position: relative;
  opacity: 0;
  top: 0;
  right: 0px;
  transition: .3s;
}

.button2:hover span {
  padding-right: 0px;
  				/*  background-color: #0C1524; */
  background-color: #CC0001;
  width: 50px;
  transform: rotateX(-360deg);
  transition: .3s;
}

.button2:hover span:after {
  opacity: 1;
  right: 0;
  width: 60px;
  background-color: #CC0001; /* #0C1524-ciemny niebieski z czerwoną obwódką, #CC0001-czerwony*/
}


.button3 {
  display: inline-block;
  background-color: transparent;
  border: none;
  color: LIGHTSTEELBLUE;		/*  */
  text-align: center;
	font-family: wingdings;
	font-size: 60px;
	position: fixed;
	bottom: 1px;
	right:5px; 
	vertical-align: middle;
  cursor: pointer;
text-shadow: 1px 1px 2px black, 0 0 25px #00D7B8, 0 0 5px black;
}

.button3 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: .5s;
  width: 65px;
  height: 65px;
}

.button3 span:after {
  content: '>';
  position: relative;
  opacity: 1;
  top: 0px;
  right: 0px;
  transition: .5s;
  width: 65px;
  height: 65px;
}

.button3:hover span {
  padding-right: 0px;
  background-color: transparent;
  transform: rotateZ(-360deg);
  transition: .5s;
  width: 65px;
  height: 65px;
text-shadow: none;
}

.button3:hover span:after {
  opacity: 1;
  right: 0px;
  background-color: transparent;
  width: 65px;
  height: 65px;
}



.flexible {
  padding: 1px; transition: all 3s;
}

/* Telefony - 600px i mniejsze */
@media only screen and (max-width: 600px) {
  .flexible {background: TRANSPARENT;}
  .pagination a {left: 0px;}
  .img_0x, .img_0y, #rok, h2, .h2 {display: none;}
  .item2 {display: none;}
  #next_02 {left: 38%;}
  #back_02 {left: 38%;}
  .naucz {margin-top: -76px;}
  .aktualne {display: none;}

  .img_01:not(:hover) {left: 10%}
  .img_01:hover {left: 10%}
  .img_01 {opacity: 0.2;}
}

/* Tablety pionowe i duże telefony - 600 px i więcej */
@media only screen and (min-width: 600px) {

  .pagination a {left: 90px;}
  .item2 {display: inline-block;}

  #next_01 {left: 355px;}
  #back_01 {left: 180px;}
  #next_02 {left: 330px;}
  #back_02 {left: 330px;}
  .naucz {margin-top: -76px;}

  .img_01:not(:hover) {left: 35%}
  .img_01:hover {left: 35%}
  .img_01 {opacity: 0.35;}
  .h2 {left: 35%;}

  .img_0x:not(:hover) {left: 48%}
  .img_0x:hover {left: 17%}	/*{left: 21%}*/
  .img_0y:not(:hover) {left: 17%}
  .img_0y:hover {left: 48%}
  h2 {left: 48%}
  #rok {display: none;}
}

/* Tablety poziome - 900 px i większe */
@media only screen and (min-width: 900px) {
  .pagination a {left: 180px;}
  .item2 {display: contents;}
  #next_01 {left: 305px;}
  #back_01 {left: 130px;}
  #next_02 {left: 280px;}
  #back_02 {left: 280px;}
  .naucz {margin-top: -76px;}

  .img_01:not(:hover) {left: 51%}
  .img_01:hover {left: 51%}
  .img_01 {opacity: 0.5;}
  .h2 {left: 51%;}

  .img_0x:not(:hover) {left: 59.5%}
  .img_0x:hover {left: 35%}	/*{left: 39%}*/
  .img_0y:not(:hover) {left: 35%}
  .img_0y:hover {left: 59.5%}
  h2 {left: 59.5%}
}


/* Laptopy/komputery stacjonarne - 992px i więcej */
@media only screen and (min-width: 992px) {
   div.flexible {column-count: 2;}
  /*.item2 {display: none;}*/

  #next_01 {left: 275px;}
  #back_01 {left: 100px;}
  #next_02 {left: 250px;}
  #back_02 {left: 250px;}

  /*#next_02 {left: 20%;}*/
  /*#back_02 {left: 20%}*/
  .naucz {margin-top: -71px;}

  .img_01:not(:hover) {left: 61%}
  .img_01:hover {left: 61%}
  .img_01 {opacity: 0.60;}
  .h2 {left: 61%;}

  .img_0x:not(:hover) {left: 68.3%}
  .img_0x:hover {left: 51%}	/*{left: 54%}*/
  .img_0y:not(:hover) {left: 51%}
  .img_0y:hover {left: 68.3%}
  h2 {left: 68.3%}
  #rok {display: inline-block; right: 10%;}
}

/* Laptopy/komputery stacjonarne - 1200px i więcej */
@media only screen and (min-width: 1200px) {

  #next_01 {left: 345px;}
  #back_01 {left: 170px;}
  #next_02 {left: 320px;}
  #back_02 {left: 320px;}

  .img_01:not(:hover) {left: 64.5%}
  .img_01:hover {left: 64.5%}
  .img_01 {opacity: 1;}
  .h2 {left: 64.5%;}

  #rok {display: inline-block; right: 5.5%;}
  .img_0x:hover {left: 60%}
  .img_0y:not(:hover) {left: 60%}
  .img_0y:hover {left: 68.3%}
}


/* Duże laptopy i komputery stacjonarne - 1620 px i mniej */
@media only screen and (max-width: 1620px) {
  .item1 {display: none;}
}

/* Duże laptopy i komputery stacjonarne - 1620 px i więcej */
@media only screen and (min-width: 1620px) {
  .item2 {display: contents;}
  #next_01 {left: 405px;}
  #back_01 {left: 230px;}
  #next_02 {left: 380px;}
  #back_02 {left: 380px;}

  .img_01 {opacity: 1;}

  .img_0x:hover {left: 63%}
  .img_0y:not(:hover) {left: 63%}
  .img_0y:hover {left: 68.3%}
  #rok {display: inline-block; right: 5.5%;}
}



/* Wysokość - 320px-380px i mniejsze*/

@media only screen and (max-height: 380px) {
  .item1 {display: none;}
}

@media only screen and (max-height: 320px) {
  .item1 {display: none;}
  .item2 {display: none;}
  .item3 {display: none;}
}

/* Wysokość - 600px-780px */

@media only screen and (max-height: 780px) and (min-width: 600px) and (max-width: 900px) {

  #next_01 {display: none;}
  #back_01 {display: none;}
  #next_02 {display: none;}
  #back_02 {display: none;}
}


-->